<template>
  <div class="Reminders">
    <!-- 催单 -->
    <div class="filter_container">
      <el-form :inline="true" :model="Reminders" class="demo-form-inline">
        <el-form-item label="城市">
          <el-select v-model="deptIds" size="small" placeholder="请选择城市" multiple @visible-change='citydataList' @change="getdeptIdsIds"
            ref='deptNameRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in cityList" :key="item.id" size="small" :label="item.deptName" :value="{label:item.deptName,value:item.id}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道">
          <el-select v-model="channelId" size="small" clearable placeholder="请选择渠道" multiple @visible-change='getChannelList'
            @change="getchannelIds" ref='channelIdRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in channelList" :key="item.dictKey" size="small" :label="item.dictValue" :value="{label:item.dictValue,value:item.dictKey}">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催单类型">
          <el-select v-model="Reminders.reminderType" size="small" clearable placeholder="请选择催单类型" @visible-change="getReminderType"
            width='120px' ref='reminderTypeRef' @keydown.native="selectBlur($event)">
            <el-option v-for="item in reminderTypeList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发起日期">
          <el-date-picker v-model="Launchdate" type="daterange" size="small" range-separator="至" start-placeholder="开始日期"
            :clearable='false' end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain size="small" icon="el-icon-search" @click="handleFilter(Reminders,Launchdate)">查询</el-button>
          <el-button type="success" plain size="small" icon='el-icon-download' @click="handleExport(Reminders,Launchdate)"  onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 催单列表 -->
    <div class="Reminderslist">
      <el-table :data="Reminderslist" border style="width: 100%">
        <el-table-column label="城市" prop="deptName" align="center" width='120px' fixed="left">
        </el-table-column>
        <el-table-column label="后台单号" prop="xmbzNo" align="center" width='180px'>
        </el-table-column>
        <el-table-column label="配送时间" prop="deliveryTime" align="center" width='180px' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="配送员" prop="delivery" align="center" width='120px' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="催单类型" prop="reminderType" align="center" width='120px' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="催单内容" prop="reminderContent" align="center" width='180px' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="催单时间" prop="createTime" align="center" width='180px' :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="申请人" prop="operator" align="center" width='120px'>
        </el-table-column>
        <el-table-column label="分仓" prop="branchWarehouse" align="center" width='120px'>
        </el-table-column>
        <el-table-column label="渠道" prop="channelName" align="center" fixed="right" width='120px'>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import {
    deptdepts,
    getChannelList
  } from "@/api/statistics";
  import {
    getExcelShowData,
    getReminderType,
    downLoadExcel
  } from "@/api/statistics"
  export default {
    data() {
      return {
        channelId: [],
        deptIds: [],
        Reminders: {
          deptIds: [],
          channelIds: [],
          startTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),
          endTime: this.dayjs(
              new Date()
            )
            .format("YYYY-MM-DD"),

          reminderType: '',
          excelType: 'REMINDER',
        },
        cityList: [], //城市
        channelList: [], //渠道
        reminderTypeList: [], //催单类型
        Reminderslist: [],
        channelIdslist: [],
        deptIdsIdslist: [],
        Launchdate: [
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
          this.dayjs(
            new Date()
          )
          .format("YYYY-MM-DD")
          .toString(),
        ],
      }
    },
    mounted() {
      this.getOrderList();
      window.addEventListener("keydown", this.keyupEnter);
    },
    destroyed() {
      window.removeEventListener("keydown", this.keyDown, false);
    },

    methods: {
      // 选择框回车失焦
      selectBlur(e) {
        if (e.keyCode == 13) {
          this.$refs['deptNameRef'].blur();
          this.$refs['channelIdRef'].blur();
          this.$refs['reminderTypeRef'].blur();
          e.returnValue = false;
        }
      },
      // 回车事件
      keyupEnter() {
        if (window.event.keyCode == 13) {
          this.handleFilter(this.Reminders, this.Launchdate); // 查询事件
        }
      },
      //如果页面有keep-alive缓存功能，这个函数会触发
      activated() {
        window.addEventListener("keydown", this.keyupEnter);
      },
      deactivated() {
        window.removeEventListener("keydown", this.keyupEnter);
      },
      citydataList() {
        deptdepts("").then(response => {
          this.cityList = response.data.data;
        });
      },
      getReminderType() {
        getReminderType().then(response => {
          this.reminderTypeList = response.data.data
        })
      },
      getChannelList() {
        getChannelList().then(response => {
          this.channelList = response.data.data;
        })
      },
      getchannelIds(data) {
        if (data) {
          this.channelIdslist = data;
        } else {
          this.channelIdslist = '';
        }

      },
      getdeptIdsIds(data) {
        if (data) {
          this.deptIdsIdslist = data;
        } else {
          this.deptIdsIdslist = '';
        }

      },
      getOrderList() {
        // 订单列表分页
        getExcelShowData(this.Reminders).then(response => {
          this.Reminderslist = response.data.data;
        });

      },
      handleFilter(Reminders, times) { //查询
        var fifterchannel = [];
        this.channelIdslist.map(item => {
          fifterchannel.push(item.value)
        })
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Reminders.channelIds = fifterchannel.join(',');
        Reminders.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Reminders.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Reminders.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Reminders.startTime);
        var time2 = Date.parse(this.Reminders.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          this.getOrderList();
        }
      },
      handleExport(Reminders, times) { //导出
        let {
          channelIds = '', deptIds = '', reminderType = ''
        } = this.Reminders
        if (reminderType == null) {
          reminderType = ''
        }
        //讲两个时间相减，求出相隔的天数

        var fifterchannel = [];
        this.channelIdslist.map(item => {
          fifterchannel.push(item.value)
        })
        var fifdeptIds = [];
        this.deptIdsIdslist.map(item => {
          fifdeptIds.push(item.value)
        })
        Reminders.channelIds = fifterchannel.join(',');
        Reminders.deptIds = fifdeptIds.join(',');
        if (times) {
          this.Reminders.startTime = this.dayjs(
              times[0]
            )
            .format("YYYY-MM-DD")
            .toString();
          this.Reminders.endTime = this.dayjs(
              times[1]
            )
            .format("YYYY-MM-DD")
            .toString();
        }
        var time1 = Date.parse(this.Reminders.startTime);
        var time2 = Date.parse(this.Reminders.endTime);
        //讲两个时间相减，求出相隔的天数
        var dayCount = Math.abs(time2 - time1) / 1000 / 60 / 60 / 24;
        if (dayCount > 30) {
          this.$message({
            showClose: true,
            message: "时间间隔不可超过31天",
            type: "warning"
          });
        } else {
          // const {
          //   user
          // } = this.$store.state
          var user = JSON.parse(localStorage.getItem('saber-userInfo'));
          window.open(
            `/api/xmbz-statistics/orderStatistics/downLoadExcel?excelType=REMINDER&startTime=${this.Reminders.startTime}&endTime=${this.Reminders.endTime}&reminderType=${reminderType}&deptIds=${Reminders.deptIds}&channelIds=${Reminders.channelIds}&blade-auth=bearer ${user['content'].accessToken}`
          )
        }
      }
    }

  }
</script>
<style lang='scss'>
  .Reminders {
    padding-top: 20px;

    .filter_container {
      display: flex;

      .el-form-item {
        margin-bottom: 22px !important;
      }
    }
  }
</style>
